<template>
  <div class="site-play-mask">
    <div class="site-play-content">
      <div class="site-play-close" @click="closeDialog">
        <zl-icon
          icon="icon-quxiao2"
          :icon-style="{ width: '20px', height: '20px', color: '#262626' }"
        ></zl-icon>
      </div>

      <div class="site-play-box">
        <zl-video
          v-if="showVideo"
          ref="videoBox"
          :play-options="playingSection"
          :autoplay="true"
          player-cont="playerCont1"
          video-Container="videoContainer1"
          :current-time-play="currentTimePlay"
          :play-now-time="playNowTime"
          :is-player-new="true"
          @timeupdate="videoTimeupdate"
          @play="hanldePlay"
          @pause="hanldePause"
          @error="showError"
          @ended="videoEnded"
          @duration="computeDuration"
          @rateRange="rateRange"
        ></zl-video>
      </div>
      <div class="flex-center-wrap flex-justify-between site-play-des ">
        <div class="flex-center-wrap">
          <div>知识点：{{ currentSite.exam_site_desc }}</div>
          <div style="margin-left: 40px;">
            讲师：{{ currentTeacher.teacher_name }}
          </div>
        </div>
        <div class="site-play-btn" @click="jumpToCourse">观看完整视频</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getVideoInfo, postVideoProgress } from '@/api/play'
import zlIcon from '@/components/zlIcon.vue'
import player from '@/components/play/player.vue'
export default {
  props: {
    currentTeacher: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      //是否显示播放器
      showVideo: false,
      currentTimePlay: 0,
      playNowTime: 0
    }
  },
  components: {
    'zl-icon': zlIcon,
    'zl-video': player
  },
  computed: {
    //当前正在播放的知识点
    currentSite() {
      return this.$store.state.play.currentSite || {}
    },
    // 当前权限选中的信息
    selectInfo() {
      return this.$store.state.play.selectInfo || {}
    }
  },
  methods: {
    // 关闭弹窗
    closeDialog() {
      this.$emit('close')
    },
    // 监听视频播放
    videoTimeupdate(time) {
      this.playNowTime = time
    },
    //获取视频播放信息
    getVideoInfo() {
      let { course_id, id, section_key_note_second } = this.currentTeacher
      this.currentTimePlay = +section_key_note_second
      this.playNowTime = this.currentTimePlay
      storage.set('last_site_play_time', this.playNowTime)
      let params = {
        course_id,
        course_section_id: id
      }
      getVideoInfo(params).then(({ data = {} }) => {
        this.playingSection = data
        this.showVideo = true
        // console.log(444, data)
      })
    },
    async jumpToCourse() {
      let { course_id, id, teacher_id, year, video_id } = this.currentTeacher
      let query = {
        course_id,
        teacher_id,
        year,
        course_section_id: id
      }
      storage.set('last_site_play_time', this.playNowTime)
      storage.set('localtion_section_id', id)
      let params = {
        from: 'web',
        videos: [
          {
            course_id,
            video_id,
            progress_second: this.playNowTime,
            play_second: 1
          }
        ],
        video_type: 0,
        last_vid: video_id
      }
      await postVideoProgress(params)
      this.closeDialog()
      this.goTo('/vplay/play.html', {
        query,
        watch: true,
        target: '_blank'
      })
    }
  },
  mounted() {
    // console.log(2222, this.currentTeacher)
    this.getVideoInfo()
  }
}
</script>
<style scoped>
.site-play-mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: transparent;
  z-index: 9999;
}

.site-play-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 16px;
  background: #262626;
  border-radius: 8px;
}

.site-play-box {
  height: 500px;
  width: 900px;
  background: #fff;
  border-radius: 8px;
}

.site-play-des {
  margin-top: 12px;
  font-size: 16px;
  color: #e6e6e6;
  line-height: 22px;
}

.site-play-btn {
  padding: 0 18px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #ff8d38;
  border-radius: 17px;
  border: 1px solid #ff8d38;
  cursor: pointer;
}

.site-play-btn:hover {
  background: #332114;
}

.site-play-close {
  position: absolute;
  top: 27px;
  right: 27px;
  height: 20px;
  width: 20px;
  z-index: 9999;
  cursor: pointer;
}
</style>
